<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';


// 编程式导航, 注意这里导入的是useRouter
const router = useRouter();
const words = ref('');

const toSearch = () => {
  if(words.value === '') {
    alert('x兄弟你要搜啥？');
    return;
  }
  // 编程式导航 以name方式进行导航
  // router.push({name: 'search'});
  // 编程式导航 以path方式进行导航
  // router.push('/search');

  // 编程式导航 以params方式进行导航
  // router.push({name: 'search', params: {words: '我是以params进行传参'}});

  // 编程式导航 以query方式进行导航
  //简单写法
  // router.push('/路径/参数值')
   router.push({
    name: 'search',  // 当然这里不可以用path代替， 当是query的时候可以用path
    params: {
      words: words.value,
    }
  });

  // 编程式导航，以params方式进行导航
  //简单写法
  // router.push('/路径?参数名1=参数值1&参数2=参数值2')
  //  router.push({
  //   name: 'search',
  //   params: {
  //     words: words.value,
  //   }
  // });
};
import { useCounterStore  } from '@/stores/counter';
const counterStore = useCounterStore();

</script>

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text" v-model="words">
      <button @click="toSearch">搜索一下</button>
    </div>
    <!-- <div class="hot-link">
      热门搜索：
      <router-link to="/search?query=黑马程序员">黑马程序员</router-link>
      <router-link to="/search?query=前端培训">前端培训</router-link>
      <router-link to="/search?query=如何成为前端大牛">如何成为前端大牛</router-link>
    </div> -->

    <div class="hot-link">
      热门搜索：
      <router-link to="/search/黑马程序员">黑马程序员</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
      <button @click="counterStore.increment">{{ counterStore.count }} - {{ counterStore.doubleCount }}</button>
    </div>
  </div>
</template>

<style scoped>
.logo-box {
  height: 150px;
  background: url('@/assets/logo.jpeg') no-repeat center;
}

.search-box {
  display: flex;
  justify-content: center;
}

.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}

.search-box input:focus {
  border: 2px solid #ad2a26;
}

.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}

.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}

.hot-link a {
  margin: 0 5px;
}
</style>
